<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>Document</title>
	<style type="text/css">
		html,body{
			width: 100%;
			height: 100%;
			margin: 0;
		}
		body{
			background: radial-gradient(red,green,blue);
			/* 景深 */
			perspective: 1000px;
			/* 视角 */
			perspective-origin: 50% 50%;
		}
		
		@keyframes rot{
			from{
				transform: rotateX(0) rotateY(0);
			}
			to{
				transform: rotateX(360deg) rotateY(360deg);
			}
		}
		
		#main{
			width: 300px;
			height: 300px;
			margin: 270px auto;
			/*background-color: red;*/
			position: relative;
			/* 让子元素进行3D变换 */
			transform-style: preserve-3d;
			animation: rot 10s infinite;
		}
		#main>div{
			width: 100%;
			height: 100%;
			position: absolute;
			background-size: 100% 100%;
			border: 1px black dashed;
			opacity: 0.8;
		}
		div.forward{
			background-color: yellow;
			transform: translateZ(200px);
			background-image: url(1000.jpg);
			
		}
		div.backward{
			background-color: green;
			transform: translateZ(-200px);
			background-image: url(1000.png);
			
		}
		div.left{
			background-color: blue;
			transform: translateX(-200px) rotateY(-90deg);
			background-image: url(me3.jpg);
		}
		div.right{
			background-color: blue;
			transform: translateX(200px) rotateY(90deg);
			background-image: url(me2.jpg);
		}
		div.up{
			background-color: blue;
			transform: translateY(-200px) rotateX(90deg);
			background-image: url(me1.jpg);
		}
		div.down{
			background-color: blue;
			transform: translateY(200px) rotateX(-90deg);
			background-image: url(me3.jpg);
		}
		
		
	</style>
</head>
<body>
	<div id="main">
		<div class="forward"></div>
		<div class="backward"></div>
		<div class="left"></div>
		<div class="right"></div>
		<div class="up"></div>
		<div class="down"></div>
	</div>
</body>
</html>